<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生信息管理</title>
    <style>
        table {
            border-collapse: collapse;
            width: 50%;
            margin-bottom: 20px;
        }

        th,
        td {
            border: 1px solid #dddddd;
            text-align: center;
            padding: 10px;
        }

        th {
            background-color: #f2f2f2;
        }

        input[type="text"] {
            margin-bottom: 10px;
            padding: 5px;
            width: 200px;
            box-sizing: border-box;
        }

        label {
            display: inline-block;
            width: 100px;
            font-weight: bold;
        }

        input[type="submit"] {
            padding: 10px 20px;
            margin-top: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }

        input[type="submit"]:hover {
            background-color: #45a049;
        }

        /* Added CSS style for table */
        #studentTable {
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <label> 姓名</label><input type="text" placeholder="请输入学生姓名" id="name">
    <label>性别</label>
    <select id="sex">
        <option value="男">男</option>
        <option value="女">女</option>
    </select><br>
    <label> 年龄</label><input type="text" placeholder="请输入学生年龄" id="age">
    <label> 班级</label><input type="text" placeholder="请输入学生班级" id="Class">

    <input type="submit" value="确定" onclick="lj()">

    <table>
        <thead>
            <tr>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>

            </tr>
        </thead>
        <tbody id="students"></tbody>
    </table>


    <Script>
        let tbody = document.getElementById('student');
        let JSON_stu = localStorage.getItem('student');//取出存储
        let students = new Array()
        initStudents()
        showStudents()
        function initStudents() {
            let JSON_stu = localStorage.getItem('students');//取出存储
            if (JSON_stu) {
                students = JSON.parse(JSON_stu);
            }
            else {
                console.log('本地存储里没有学生信息')
            }
            // if(JSON_stu){
            //     students= JSON.parse(JSON_stu);
            //     tbody.innerHTML='';
            //     tbody.innerHTML=tbody.innerHTML+'<tr><td>'+name.value+'</td><td>'+sex.value+'</td><td>'+age.value+'</td></tr>'
            // }
            // else{
            //     console.log('本地存储里没有学生信息')
            }
            function showStudents() {
                tbody.innerHTML = '';
                for (let i = 0; i < students.length; i++) {
                    let stu = students[i]
                    tbody.innerHTML = '<tr><td>' + name.value + '</td><td>' + sex.value + '</td><td>' + age.value + '</td></tr>'
                }
            }
            // function get_stu_obj(name,sex,age,Class)
            //     let student={
            //         name:name,
            //         sex:sex,
            //         age:age,
            //         Class:Class
            //     }
            //     return student
            function lj() {
                let name = document.getElementById("name").value
                let sex = document.getElementById("sex").value
                let age = document.getElementById("age").value
                students.push({ name: name, gender: gender, age: age })
                localStorage.setItem('student', JSON.stringify(student));
                showStudents()


                // let tbody= document.getElementById("students")
                // console.log(name.value,sex.value,age.value)
                // tbody.innerHTML='<tr><td>'+name.value+'</td><td>'+sex.value+'</td><td>'+age.value+'</td></tr>'

                // let stu= get_stu_obj(name.value,sex.value,age.value);
                // students.push(stu);
                // localStorage.setItem('student',JSON.stringify(student));//存入储存



            }
    </Script>
</body>

</html>